<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">wrtwretwert</div>
    <!-- asdfasdfasdfasdfsadfasdf -->
    <script>
        /* 
        
        . DOM 节点
        + 页面的每一个组成部分
        + 常见的节点分类
          => 元素节点: 页面上的标签 <div></div>
          => 属性节点: 书写在标签上的属性(不作为独立节点出现, 不和任何节点产生父子关系)
          => 文本节点: 书写在标签对内的文本内容(包含换行和空格)
          => 注释节点: 书写的注释内容(包含换行和空格)

      2. 节点操作
        2-1. 获取元素节点
          => 非 常规元素
            -> html: document.documentElement
            -> head: document.head
            -> body: document.body
          => 常规元素
            -> getElemenmtById()
            -> getElemenmtsByClassName()
            -> getElemenmtsByName()
            -> getElemenmtsByTagName()
            -> querySelector();
            -> querySelectorAll()
        2-2. 获取节点
          => childNodes  子一级 子节点
          => children  子一级 仅仅是元素
          => firstChild 子一级 第一个子节点  
          => firstElementChild 子一级 第一个子元素节点
          => lastChild 子一级 最后一个子节点 
          => lastElementChild 子一级 最后一个子元素节点
          => previousSibling 一级  同级的前一个  
          => previousElementSibling 一级  同级的前一个元素
          => nextSibling 一级  同级的后一个 子节点
          => nextElementSibling 一级  同级的后一个元素
          => parentNode  父节点 
          => parentElement 父元素节点 
          => attributes  所有的属性 
        2-3. 创建节点
          => document.createElement(); 
          => document.createTextNode()
        2-3. 插入节点
          => 父节点.appendChild(子节点) // 父节点的最后一个位置 
          => 父节点.insertBefore(新的子节点, 谁的前面)
        2-4. 删除节点
          => 父节点.removeChild(子节点)
          => 节点.remove()
        2-5. 替换节点
          => 父节点.replaceChild(换上节点, 换下节点)
        2-6. 克隆节点
          => var 变量 = 节点.cloneNode(参数)
            -> 参数默认是 false 不克隆后代节点 但是克隆属性 
            -> 参数选填是 true 克隆后代节点

      3. 节点属性
        3-1. nodeType 节点类型
          => 元素节点: 1
          => 属性节点: 2
          => 文本节点: 3
          => 注释节点: 8
        3-2. nodeName 节点名称
          => 元素节点: 大写标签名  
          => 属性节点: 属性名
          => 文本节点: #text
          => 注释节点: #comment
        3-3. nodeValue 节点内容
          => 元素节点: null
          => 属性节点: 属性值
          => 文本节点: 文本内容(包含换行和空格)
          => 注释节点: 注释内容(包含换行和空格)
        
        
        
        
        */
    </script>
</body>
</html>